import React, { Component } from 'react'

import { Table, Button } from 'antd';
import Ellipsis from '@/components/Ellipsis';

import styled from 'styled-components';
import { connect } from 'dva';
import { Dispatch } from 'typings/redux';

const LabelButton = styled(Button)`
  display: inline-block;
  min-width: 46px;
  ${props => {
    switch (props.types.toString()) {
      case '1':
        return `border-color: var(--warning) !important; color: var(--warning) !important`
      case '2':
        return `border-color: var(--yellow) !important; color: var(--yellow) !important`
      case '8':
        return `border-color: var(--safe) !important; color: var(--safe) !important`
      case '4':
        return `border-color: var(--error) !important; color: var(--error) !important`
      default:
        return `border-color: var(--error) !important; color: var(--error) !important`
    }
  }};
`

interface P {
  dispatch?: Dispatch;
  loading?: boolean;
  data?: Array<any>;
  height: string;
}

@connect(({ home, loading }) => ({
  data: home.position || [],
  loading: loading.effects['home/queryPosition'],
}))
class Position extends Component<P> {
  
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'home/queryPosition' })
  }
  
  render() {

    const column = [{
      title: '检查状态',
      dataIndex: 'statusName',
      width: 100,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 180,
          }
        }
      },
      render: (text, record) => (
        <LabelButton size="small" types={record.status}>{ text }</LabelButton>
      )
    }, {
      title: '检查任务',
      dataIndex: 'name',
      width: 200,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 200,
          }
        }
      },
      render: (text) => (
        <>{ text ? text.substr(0, text.length - 13) : '' }</>
      )
    }, {
      title: '检查时间',
      dataIndex: 'startTime',
      render: (text) => (
        <Ellipsis tooltip={true} lines={1}>
          {text ? text.slice(0, 10) : ''}
        </Ellipsis>
      )
    }];

    const { data } = this.props;
    const ans = Array.isArray(data) ? data.map((v, i) => ({
      key: i,
      ...v
    })) : []

    return (
      <Table 
        columns={column} 
        dataSource={ans}
        loading={this.props.loading}
        pagination={false}
        style={{ height: '100%' }}
        scroll={{ y: this.props.height }}
        showHeader={false}
        size="small"
      />
    )
  }
}

export default Position;